import React from 'react';
import { motion } from 'framer-motion';

import Text, { TEXT_TAG, TEXT_VIEW, TEXT_WEIGHT } from 'components/Text';
import { classnames } from 'utils';

import classes from './Card.module.scss';

export type CardProps = {
    id?: string;
    /** Дополнительный classname */
    className?: string;
    /** URL изображения */
    image: string;
    /** Слот над заголовком */
    captionSlot?: React.ReactNode;
    /** Заголовок карточки */
    title: React.ReactNode;
    /** Описание карточки */
    subtitle: React.ReactNode;
    /** Содержимое карточки (футер/боковая часть), может быть пустым */
    contentSlot?: React.ReactNode;
    /** Клик на карточку */
    onClick?: React.MouseEventHandler;
    /** Слот для действия */
    actionSlot?: React.ReactNode;
};

const cnCard = classnames(classes, 'card');

const Card = React.forwardRef<HTMLDivElement, CardProps>(
    ({ className, id, image, captionSlot, title, subtitle, contentSlot, onClick, actionSlot }, ref) => (
        <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{amount: 0.15 }}
            id={id}
            className={cnCard() + ` ${className}`}
            onClick={onClick}
            ref={ref}
        >
            <img alt="img" src={image} className={cnCard('image')} />
            <div className={cnCard('info')}>
                <div className={cnCard('description')}>
                    {captionSlot && (
                        <Text tag={TEXT_TAG.span} view={TEXT_VIEW.p14} weight={TEXT_WEIGHT.medium} color="secondary">
                            {captionSlot}
                        </Text>
                    )}
                    <Text tag={TEXT_TAG.span} view={TEXT_VIEW.p20} weight={TEXT_WEIGHT.medium} maxLines={2}>
                        {title}
                    </Text>
                    <Text tag={TEXT_TAG.span} view={TEXT_VIEW.p16} color="secondary" maxLines={3}>
                        {subtitle}
                    </Text>
                </div>
                {(!!contentSlot || !!actionSlot) && (
                    <div className={cnCard('footer')}>
                        {contentSlot && (
                            <Text
                                tag={TEXT_TAG.span}
                                view={TEXT_VIEW.p18}
                                weight={TEXT_WEIGHT.bold}
                                className={cnCard('contentSlot')}
                            >
                                {contentSlot}
                            </Text>
                        )}
                        {actionSlot}
                    </div>
                )}
            </div>
        </motion.div>
    ),
);

export default Card;
